<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="form-input-area" style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>

        <div class="filter-line flx-row-s-c b-b-d">
          <span class="f-14 c-black" style="dispaly: inline-block; width: 300px"
            ><span class="f-w-600 f-14">实名认证</span
            ><span style="margin-left: 48px"
              ><span
                class="c-black f-14"
                style="margin-right: 20px"
                v-if="$store.state.user.username"
                >{{ $store.state.user.username }}</span
              >
              {{
                authStatus == -1
                  ? "未认证"
                  : authStatus == 0
                  ? "认证中"
                  : authStatus == 1
                  ? "认证成功"
                  : authStatus == 2
                  ? "认证失败"
                  : ""
              }}</span
            ></span
          >
          <div
            v-if="authStatus == -1 || authStatus == 2"
            @click="showCertificationModal"
            class="o-form-font-button f-w-600 pub-m-l-120"
          >
            认证
          </div>
        </div>

        <div class="filter-line flx-row-s-c b-b-d">
          <span class="f-14 c-black" style="dispaly: inline-block; width: 300px"
            ><span class="f-w-600 f-14">登录密码</span
            ><span style="margin-left: 48px">已设置</span></span
          >
          <div
            @click="showUpdatePwdModal"
            class="o-form-font-button f-w-600 pub-m-l-120"
          >
            修改
          </div>
        </div>

        <div class="filter-line flx-row-s-c b-b-d">
          <span
            class="f-14 c-black"
            style="dispaly: inline-block; width: 300px"
          >
            <span class="f-w-600 f-14">账户邮箱</span
            ><span style="margin-left: 48px">{{
              email != null && email != "" ? email : "未设置"
            }}</span></span
          >
          <div
            @click="showChangeEmailModal"
            class="o-form-font-button f-w-600 pub-m-l-120"
            v-if="email != null && email != ''"
          >
            修改
          </div>
          <div
            @click="showAddEmailModal"
            class="o-form-font-button f-w-600 pub-m-l-120"
            v-else
          >
            设置
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <span
            class="f-14 c-black"
            style="dispaly: inline-block; width: 300px"
          >
            <span class="f-w-600 f-14">绑定手机</span>
            <span class="c-black" style="margin-left: 48px">{{
              mobile
            }}</span></span
          >
          <div
            @click="showChangePhoneModal"
            class="o-form-font-button f-w-600 pub-m-l-120"
          >
            修改
          </div>
        </div>
      </div>
      <certification-modal
        :show.sync="certificationModalShow"
        @submit-success="getIdentify"
        :colorType="colorType"
      ></certification-modal>
      <add-email-modal :show.sync="addEmailModalShow"></add-email-modal>
      <update-pwd-modal :show.sync="updatePwdModalShow"></update-pwd-modal>
      <change-phone-modal
        :show.sync="changePhoneModalShow"
        @change-success="getIdentify"
      ></change-phone-modal>
      <change-email-modal
        :show.sync="changeEmailModalShow"
        @change-success="getIdentify"
      ></change-email-modal>
    </div>
  </div>
</template>

<script>
import { getIdentify } from "@/api/user";
import { getBottom } from "@/api/data";
export default {
  name: "VipMytemplate",
  components: {
    certificationModal: () =>
      import("_c/modal/userModal/certificationModal/certificationModal.vue"),
    addEmailModal: () =>
      import("_c/modal/userModal/addEmailModal/addEmailModal.vue"),
    updatePwdModal: () =>
      import("_c/modal/userModal/updatePwdModal/updatePwdModal.vue"),
    changePhoneModal: () =>
      import("_c/modal/userModal/changePhoneModal/changePhoneModal.vue"),
    changeEmailModal: () =>
      import("_c/modal/userModal/changeEmailModal/changeEmailModal.vue"),
  },
  data() {
    return {
      loading: false,
      breadCrumb: [{name: "管理中心"},{ name: "账户管理" }, { name: "安全中心" }],
      tablist: [
        {
          name: "安全中心",
          to: "/user/security",
        },
      ],
      colorType: 0,
      authStatus: null,
      email: null,
      isSetPwd: null,
      mobile: null,
      certificationModalShow: false,
      addEmailModalShow: false,
      updatePwdModalShow: false,
      changePhoneModalShow: false,
      changeEmailModalShow: false,
    };
  },
  created() {
    this.getIdentify();
    if (this.$storage.getColor()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.color = data.color;
        this.colorType = data.colorType;
      }
    },
    async getIdentify() {
      this.loading = true;
      let res = await getIdentify();
      if (res.code == 200) {
        this.authStatus = res.data.authStatus;
        this.email = res.data.email;
        this.isSetPwd = res.data.isSetPwd;
        this.mobile = res.data.mobile;
      }
      this.loading = false;
    },
    // 点击按钮
    showCertificationModal() {
      this.certificationModalShow = true;
    },
    showAddEmailModal() {
      this.addEmailModalShow = true;
    },
    showUpdatePwdModal() {
      this.updatePwdModalShow = true;
    },
    showChangePhoneModal() {
      this.changePhoneModalShow = true;
    },
    showChangeEmailModal() {
      this.changeEmailModalShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.tips-area {
  margin: 20px 34px 0;
}
</style>
